<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="JS/vue.js"></script>
<script src="JS/axios.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<body>

<div id="test">
    <div>
        <el-input placeholder="请输入内容" v-model="input1">
            <template slot="prepend">Http://</template>
        </el-input>
        <el-button round @click="fason()">发送url</el-button>
        <el-input
                placeholder="请输入商品名"
                v-model="input2"
                clearable>
        </el-input>
        <el-button plain @click="allproduct">查询</el-button>
        <el-button type="primary" plain @click="insert()">添加</el-button>
    </div>


    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    label="id"
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="productname"
                    label="商品名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="spec"
                    label="规格"
                    align="center">

            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-dialog
            title="商品信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="form.productname"></el-input>
            </el-form-item>
            <el-form-item label="规格">
                <el-input v-model="form.spec"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="gb()">取 消</el-button>
    <el-button type="primary" @click="ofcourse()">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
            title="商品添加"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="form.productname"></el-input>
            </el-form-item>
            <el-form-item label="规格">
                <el-input v-model="form.spec"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="gb()">取 消</el-button>
    <el-button type="primary" @click="ofcoursetwo()">确 定</el-button>
  </span>
    </el-dialog>



</div>
</body>
<style>
    .el-select .el-input {
        width: 50px;

    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

</style>

<script>


   new Vue({
        el:"#test",
        methods: {
            fason () {
                axios({
                    method:"post",
                    url:"http://localhost:8080/produc/urlpath",
                    data:{
                        paths:this.input1
                    }
                }).then(resp => {
                })
            },
            allproduct () {
                axios({
                    method:"get",
                    url:"http://localhost:8080/produc/all?name="+this.input2
                }).then(resp => {
                    this.tableData = resp.data
                })

            },
            handleDelete(index, row) {
                axios({
                    method: "delete",
                    url: "http://localhost:8080/produc/"+row.id
                }).then(resp => {
                    this.allproduct();

                })

            },handleEdit(index, row) {
                this.dialogVisible=true;
                this.form.productname=row.productname,
                this.form.id=row.id,
                this.form.spec=row.spec,
                this.form.price=row.price
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            onSubmit() {
                console.log('submit!');
            },
            ofcourse(){
                this.dialogVisible=false;
                    axios({
                        method: "put",
                        url: "http://localhost:8080/produc/updata",
                        data:{
                            "form":this.form
                        }
                    }).then(resp => {
                        this.allproduct();
                    })
            },
            gb(){
                this.dialogVisible = false,
                    this.dialogVisible2=false,
                    this.form.productname='',
                    this.form.spec='',
                    this.form.price=''
            },
            insert(){
                this.dialogVisible2=true,
                this.form.productname='',
                    this.form.id='',
                    this.form.spec='',
                    this.form.price=''
            },
            ofcoursetwo(){
                this.dialogVisible2=false,
                    axios({
                        method: "post",
                        url: "http://localhost:8080/produc/insert",
                        data:{
                            "form":this.form
                        }
                    }).then(resp => {
                        this.allproduct();
                    })
            }

        },
        data() {
            return {
                input2: '',
                input1: '',
                tableData: [{
                    productname: '',
                    spec: '',
                    price: '',
                     id:''
                }],
                dialogVisible: false,
                dialogVisible2: false,
                form: {
                    id:'',
                    productname: '',
                    spec: '',
                    price: ''
                }
            }

        },
        mounted(){
            this.allproduct();
        }
    })
</script>
</html>